<?php 
	$prev_link = "/user/order/index/date/" . $this->date . "/number_seat/" . $this->number_seat . "#&tab-crossday";
?>

<section class="grid_12" id="winzard-wrapper">
	<div class="block-border">
		<div class="block-content" style="overflow: hidden;">
			<h1>会議室予約</h1>		
			<div class="block-controls">
				<ul class="controls-buttons">
					<li>
						<a href="<?php echo $prev_link?>" title="前のステップ">
							<img src="/images/icons/fugue/navigation-180.png" width="16" height="16">
							前のステップ
						</a>
					</li>
					<li>
						<a href="#" title="次のステップ"　id="next-step-btn" onclick='$("#order-form").submit();return false;'>
							次のステップ
							<img src="/images/icons/fugue/navigation.png" width="16" height="16">
						</a>
					</li>
				</ul>
			</div>
			
			<ol class="wizard-steps">
				<li>
					<a href="<?php echo $prev_link?>">
						<span class="number">1<span class="status-ok"></span></span>
						日と席の数を選択
					</a>
				</li>
				<li>
					<a href="#status-bar">
						<span class="number">2</span>
						予約時間を選択
					</a>
				</li>
				<li class="disabled">
					<span class="number">3</span>
					確認
				</li>
			</ol>
			
			<span class="number bigger">2</span>
			<small>会議室予約</small>
			<h2 class="bigger">会議室と予約時間を選択</h2>
			
			<!-- Room status -->
			<?php include 'room-status-crossday.phtml';?>
		
			<!-- Room status -->
			<?php include 'order-form-crossday.phtml';?>
		
		</div>
	</div>
</section>

<link href="/css/jquery.ui.timepicker.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/js/jquery.ui.timepicker.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("html, body").animate({scrollTop: $("#status-bar").offset().top}, "slow");
		
		$('#start_time').timepicker({
			showOn: 'button',
			showCloseButton : true,
			button : $("#start_time_btn"),
			showCloseButton : true,
			hours: {
		        starts: 0,
		        ends: 23
		    },
			minutes: {
		        starts: 0,  
		        ends: 30,
		        interval: 30
		    },
		    defaultTime:"8:00"
		});

		$('#end_time').timepicker({
			showOn: 'button',
			showCloseButton : true,
			button : $("#end_time_btn"),
			hours: {
		        starts: 0,
		        ends: 23
		    },
			minutes: {
		        starts: 0,  
		        ends: 30,
		        interval: 30
		    },
		    defaultTime:"10:00"
		});
	});

	function setMeetingRoom(id){
		$("#room_id").val(id);
	}
</script>